<script setup>
import Html2Pdf from "./html2Pdf"
const props = defineProps({
  borderColor: { type: String, default: '#111' },
  color: { type: String, default: '#111' },
  fontSize: { type: String, default: '17px' },
  fontFamily: { type: String, default: 'Helvetica Neue' },
})
const elRef = ref()
const visible = ref(false)
const titleValue = ref(false)
const loading = ref(false)
const open = async (title) => {
  titleValue.value = title
  visible.value = true
  loading.value = true
  await nextTick()
}

const start = async () => {
  await nextTick()
  await new Promise(reslove => setTimeout(() => reslove(true), 500))
  const html2pdf = new Html2Pdf({
    title: titleValue.value,
    el: elRef.value,
    type: "a4",
    beforeFn() {
      // console.log("before")
    },
    afterFn() {
      // console.log("after")
    }
  })
  html2pdf.start()
  return await new Promise(reslove => setTimeout(() => reslove(true), 500))
}

const close = () => {
  visible.value = false
  loading.value = false
}

defineExpose({ open, start, close, elRef })  
</script>

<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" class="full">
    <template #header>
      <div class="flex items-center">
        {{ titleValue }}
        <!-- <el-button :loading="loading" link type="primary" class="ml-auto">下载中</el-button>
        <div class="ml-auto w-32"></div> -->
      </div>
    </template>
    <div ref="elRef" class="print" :style="{ '--border-color': borderColor, '--color': color, '--font-size': fontSize, '--font-family': fontFamily }">
      <slot />
    </div>
    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>